<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-2.1.0.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/vant.min.js"></script>
		
		<link rel="stylesheet" type="text/css" href="css/main.css" />
	</head>
	<body>
		<div id="app">
				<header style="margin-top: 20px;margin-bottom: 20px;">
					<van-search placeholder="请输入搜索关键词" v-model="value" />
				</header>
				<section>
					<van-row>
						<van-col span="6">
							<van-badge-group :active-key="activeKey" @change="onChange">
								<a href="分类.html"><van-badge title="手机"></van-badge></a>
								<a href="分类2.html"><van-badge title="酒水饮料"></van-badge></a>
								<van-badge title="厨房用具"></van-badge>
								<van-badge title="内衣内裤"></van-badge>
								<van-badge title="日用百货"></van-badge>
							</van-badge-group>
						</van-col>
						<van-col span="18">
							<van-row> 
								<van-col span="11">
									<img src="img/mai1.jpg"/>
									max破产都要买的口红
								</van-col>
								<van-col span="11" offset="1">
									<img src="img/mai2.jpg"/>
									最美绝版南瓜色
								</van-col>
							</van-row>
							<van-row>
								<van-col span="11">
									<img src="img/mai3.jpg"/>
								</van-col>
								
							</van-row>
						</van-col>
						
					</van-row>
					
				</section>
				<footer>
					<van-tabbar v-model="active">
						<van-tabbar-item icon="home-o">首页</van-tabbar-item>
						<van-tabbar-item icon="shop-o">分类</van-tabbar-item>
						<van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
						<van-tabbar-item icon="user-o">个人中心</van-tabbar-item>
					</van-tabbar>
				</footer>
		</body>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					active: 0,
					value: "",
					activeKey: ""
				},
				methods: {
					tabChange: function() {
						plus.webview.show(this.views[this.active].name);
					},
					onChange(key) {
						this.activeKey = key;
					}
					
				},
				mounted: function() {
					var _this = this;
					document.addEventListener('plusready', function() {
						var currentWebView = plus.webview.currentWeb();
						for (var i = 0; i < _this.views.length; i++) {
							var tempWebView = plus.webview.create(_this.views[i].url, this.views[i], name, {
								top: "46px",
								bottom: "50px",
								scrollIndicator: "none",
								zindex: 1
							});
							currentWebView.append(tempWebView);
						}
						plus.webview.show(_this.views[0], name)
					})
				
			},
		
			})
		</script>
	</body>
</html>
